import { useState } from 'react'
import { NavBar, Card, Button, Space } from 'antd-mobile'
import { MoreOutline, UserOutline, FilterOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import './zhu5.css'

function Index() {
  const navigate = useNavigate()
  const [filterVisible, setFilterVisible] = useState(false)

  const handleBack = () => {
    navigate(-1)
  }

  const handleSwitchPatient = () => {
    console.log('切换患者')
  }

  const handleFilter = () => {
    setFilterVisible(!filterVisible)
    console.log('筛选陪护证')
  }

  const handleCancelApplication = (id: number) => {
    console.log('取消申请:', id)
  }

  const handleDeregister = (id: number) => {
    console.log('注销陪护证:', id)
  }

  const handlePasscode = (id: number) => {
    console.log('闸机通行码:', id)
  }

  const handleAddEscort = () => {
    console.log('新增陪护')
  }

  // 陪护证数据
  const escortCertificates = [
    {
      id: 1,
      name: '王小柯',
      gender: '女',
      idNumber: '5051************223',
      status: 'pending',
      statusText: '待审核',
      patientName: '王大柯',
      ward: '内一科门诊',
      validityPeriod: null,
      avatar: '👩‍⚕️'
    },
    {
      id: 2,
      name: '王小柯',
      gender: '女',
      idNumber: '5051************223',
      status: 'effective',
      statusText: '已生效',
      patientName: '王大柯',
      ward: '内一科门诊',
      validityPeriod: '2020-01-01 至 2020-02-01',
      avatar: '👩‍⚕️'
    },
    {
      id: 3,
      name: '王小柯',
      gender: '女',
      idNumber: '5051************223',
      status: 'effective',
      statusText: '已生效',
      patientName: '王大柯',
      ward: '内一科门诊',
      validityPeriod: '2020-01-01 至 2020-02-01',
      avatar: '👩‍⚕️'
    }
  ]



  return (
    <div className="zhu5-container">
      {/* 顶部导航栏 */}
      <NavBar
        onBack={handleBack}
        right={
          <Space>
            <MoreOutline fontSize={20} />
            <div className="nav-icon">◎</div>
          </Space>
        }
        className="zhu5-navbar"
      >
        我的陪护证
      </NavBar>

      {/* 患者信息区域 */}
      <div className="patient-info">
        <div className="patient-basic">
          <span className="patient-name">王小柯</span>
          <span className="patient-id">2015****10</span>
        </div>
        <div className="switch-patient" onClick={handleSwitchPatient}>
          <UserOutline fontSize={16} />
          <span>切换</span>
        </div>
      </div>

      {/* 陪护证列表标题和筛选 */}
      <div className="list-header">
        <h3 className="list-title">陪护证列表</h3>
        <div className="filter-section" onClick={handleFilter}>
          <FilterOutline fontSize={16} />
          <span>筛选</span>
        </div>
      </div>

      {/* 陪护证卡片列表 */}
      <div className="certificate-list" >
        {escortCertificates.map((certificate) => (
          <Card key={certificate.id} className="certificate-card">
            <div className="card-header">
              <div className="escort-info">
                <div className="escort-avatar">{certificate.avatar}</div>
                <div className="escort-details">
                  <div className="escort-name">
                    {certificate.name} {certificate.gender}
                  </div>
                  <div className="escort-id">
                    身份证号: {certificate.idNumber}
                  </div>
                </div>
              </div>
              <div 
                className={`status-badge ${certificate.status === 'pending' ? 'pending' : 'effective'}`}
              >
                {certificate.statusText}
              </div>
            </div>

            <div className="patient-info-section">
              <div className="info-item">
                <span className="label">住院人:</span>
                <span className="value">{certificate.patientName}</span>
              </div>
              <div className="info-item">
                <span className="label">住院病区:</span>
                <span className="value">{certificate.ward}</span>
              </div>
              {certificate.validityPeriod && (
                <div className="info-item">
                  <span className="label">有效范围:</span>
                  <span className="value">{certificate.validityPeriod}</span>
                </div>
              )}
            </div>

            <div className="action-buttons">
              {certificate.status === 'pending' && (
                <Button 
                  className="cancel-btn"
                  size="small"
                  color="danger"
                  onClick={() => handleCancelApplication(certificate.id)}
                >
                  取消申请
                </Button>
              )}
              
              {certificate.status === 'effective' && (
                <>
                  <Button 
                    className="deregister-btn"
                    size="small"
                    color="danger"
                    onClick={() => handleDeregister(certificate.id)}
                  >
                    注销陪护证
                  </Button>
                  <Button 
                    className="passcode-btn"
                    size="small"
                    color="primary"
                    onClick={() => handlePasscode(certificate.id)}
                  >
                    闸机通行码
                  </Button>
                </>
              )}
            </div>
          </Card>
        ))}
      </div>

      {/* 新增陪护按钮 */}
      <div className="add-escort-container">
        <Button 
          className="add-escort-btn"
          color="primary"
          onClick={handleAddEscort}
        >
          <span>新增陪护</span>
        </Button>
      </div>
    </div>
  )
}

export default Index
